<template>
  <view class="valueCardGivetoConfirm">
    <view class="give_box">
      <view class="txt">您将要转赠:</view>
      <view class="money">￥{{ card.money }}</view>
      <view class="txt_bold">共1张储值卡</view>
    </view>

    <view class="giveInfo">
      <view class="title">请填写转赠信息:</view>
      <input v-model="given" class="givener" type="text" placeholder="赠与人">
      <input v-model="beGiven" class="begivener" type="text" placeholder="受赠人">
      <input v-model="phone" class="phone" type="number" placeholder="手机号">
      <input v-model="memo" class="memo" type="text" placeholder="转赠备注">
    </view>

    <button class="page-body-button" bindtap="givenConfirm" type="warn">确认转赠</button>
    <view class="instruction">
      <view class="explain">转赠说明</view>
      <view><text>1、请您到银行柜面、中银自助终端、网银开通银联无卡支付业务，并在个人客户基本资料中预留手机号码。详情咨询95566。</text></view>
    </view>
  </view>
</template>
<script>
const util = require('@/utils/util.js')
import { cardGiven } from '@/api/api1'
export default {
  components: {},
  data() {
    return {
      card: {},
      given: '',
      beGiven: '',
      phone: '',
      memo: ''
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    }
  },
  onLoad(options) {
    const card = JSON.parse(options.card)
    this.card = card
  },
  onReachBottom() {
  },

  methods: {
    givenConfirm: function() {
      var that = this
      if (!that.phone) {
        util.Tips({ title: '需要填写手机号' })
        return
      }
      uni.showLoading({
        title: '转赠储值卡...'
      })
      cardGiven({
        cardNo: this.userInfo.cardNo, // 转赠的会员卡号
        mobile: that.phone, // 转赠的手机号
        valueCardNo: that.card.cardno// 转赠的储值卡卡号
      }).then(res => {
        wx.hideLoading()
        console.info('转赠储值卡:', res)
        uni.Open('提示', res.data.rt_message, function() {
          uni.bak()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.valueCardGivetoConfirm {
  min-height: 100%;
  flex: 1;
  font-size: 32rpx;
  font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
  overflow: hidden;
}

.give_box {
  text-align: center;
  margin: 40rpx 0 80rpx 0;
}

.txt {
  font-family: Courier, Calibri, '黑体';
  font-size: 32rpx;
  letter-spacing: 2rpx;
}

.money {
  font-family: Courier, Calibri, '黑体';
  font-weight: 600;
  font-size: 46rpx;
  letter-spacing: 2rpx;
  color: #f8484a;
  line-height: 70rpx;
}

.txt_bold {
  font-family: Courier, Calibri, '黑体';
  font-weight: 600;
  font-size: 32rpx;
  letter-spacing: 2rpx;
}

.giveInfo {
  margin: 0 40rpx;
}

.giveInfo .title {
  font-family: Courier, Calibri, '黑体';
  font-weight: 600;
  font-size: 32rpx;
  letter-spacing: 2rpx;
}

.givener {
  border-bottom: 2rpx solid #d5d5d5;
  font-family: Courier, Calibri, '黑体';
  font-size: 32rpx;
  height: 100rpx;
  letter-spacing: 4rpx;
}

.begivener {
  border-bottom: 2rpx solid #d5d5d5;
  font-family: Courier, Calibri, '黑体';
  font-size: 32rpx;
  height: 10r0px;
  letter-spacing: 4rpx;
}

.phone {
  border-bottom: 2rpx solid #d5d5d5;
  font-family: Courier, Calibri, '黑体';
  font-weight: 500;
  font-size: 32rpx;
  height: 100rpx;
  letter-spacing: 4rpx;
}

.memo {
  border-bottom: 2rpx solid #d5d5d5;
  font-family: Courier, Calibri, '黑体';
  font-size: 32rpx;
  height: 100rpx;
  letter-spacing: 4rpx;
}

.page-body-button {
  margin-top: 60rpx;
  margin-bottom: 60rpx;
  border-radius: 40rpx;
}

.instruction {
  padding: 0 40rpx;
}

.instruction .explain {
  font-size: 32rpx;
  font-family: Courier, Calibri, '黑体';
  font-weight: 600;
  letter-spacing: 2rpx;
}

.instruction text {
  opacity: 0.5;
  font-size: 22rpx;
  font-family: Courier, Calibri, '黑体';
  font-weight: 500;
  text-align: left;
  color: #000000;
}
</style>
